<template>
	<transition name="error-fade">
		<div class="error-out" v-show="visible">
			{{message}}
		</div>
	</transition>
</template>
<script>
	export default {
		data(){
			return {
				message:"",
				duration:5000,
				closed: false,
				visible:true
			}
		},
		methods:{
			close(){
				this.closed=true;
			}
		},
		watch: {
		    closed(newVal) {
		        if (newVal) {
		          //this.visible = false;
		          	this.$el.addEventListener('transitionend', this.destroyElement);
		        }
		    }
	    },
		mounted() {
		    if (this.duration > 0) {
		        this.timer = setTimeout(() => {
		          if (!this.closed) {
		            this.close();
		          }
		        }, this.duration);
		    }
	    }
	}
</script>
<style scoped>
	.error-out{width: 300px;padding: 20px;text-align: center;}
</style>
